<template>
  <div class="attachment-box">

    <div class="file-list">
      <el-upload class="upload-demo" v-if="isShowGz" action="" :before-upload="beforeUpload" :http-request="uploadFile" :show-file-list="false">
        <el-button type="primary" :loading="uploading">上传盖章文件<i class="el-icon-upload el-icon--right"></i></el-button>
        <!-- <i class="el-icon-plus"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
      </el-upload>
      <el-scrollbar class="scorll-Y" :style="{
          height: fileList.length > 6 ? '180px' : fileList.length * 50 + 'px',
        }">
        <div class="file-item" v-for="(item, index) in fileList" :key="index">
          <div>
            <i class="el-icon-link"></i>
            <el-tooltip popper-class="hc-dec-text" v-if="item.fileName.length > filenameLength" :content="item.fileName" placement="top" effect="light">
              <span class="filename">{{
                item.fileName.substring(0, filenameLength) + "..."
              }}</span>
            </el-tooltip>
            <span v-else class="filename" :title="item.fileName">{{ item.fileName }}</span>
          </div>
          <div>
            <!-- <span class="btn-down" @click="handleDownload(item)">下载</span> -->
            <span class="btn-remove" v-if="isShowGz" @click="handleRemove(item)">删除</span>
          </div>
        </div>
      </el-scrollbar>
    </div>


  </div>
</template>
<script>
import { getList as getFileDataList, openUpload, downWordFile } from '../api/common/filedata'
import filePreview from "../utils/filePreview";
import { mapGetters } from 'vuex'
export default {
  name: "GZUpload",
  props: [
    "relationUnid",
    "moduleName",
    "formType"
  ],
  computed: {
    ...mapGetters(["userInfo"]),
    isShowGz()
    {
      let isShowGz = false;
      if (this.userInfo && this.userInfo.roleKey)
      {
        let tampObj = this.userInfo.roleKey.find(pre_item =>
        {
          return pre_item.roleName == "发文总文书"
        })
        if (tampObj)
        {
          isShowGz = true;
        }
      }
      return isShowGz;
    },
  },
  data()
  {
    return {
      uploading: false, //显示loading
      fileList: [], //文件列表
      //文件标题显示长度
      filenameLength: window.HC_config.VUE_SHOW_FILENAME_LENGTH || 6,
    };
  },

  watch: {
    relationUnid(newV, oldV)
    {
      this.getAttachList();
    },
  },
  created()
  {
    // 查询文件列表
    this.getFileDataList();
  },
  mounted()
  {
    // bus.$on("reflsh", (res) => {
    //   this.getAttachList();
    // });
  },
  methods: {
    // 查询文件列表
    getFileDataList()
    {
      getFileDataList({ parentUnid: this.relationUnid }).then(res =>
      {
        if (res.code == 200)
        {
          this.fileList = []
          res.result.data.map(item =>
          {
            var file = {}
            file.fileName = item.efileHastmFilename || item.efileHasstampFilename,
              file.status = 'done',
              file.unid = item.unid
            file.url = item.url
            this.fileList.push(file)
          })
        }
      })
    },
    //提供给外部获取文件列表
    getFileList()
    {
      return this.fileList;
    },
    //文件上传前钩子
    beforeUpload(file)
    {
      console.log("上传前钩子");
      console.log(file);
      //  手动上传
      return true;
    },

    uploadFile(file)
    {
      const formData = new FormData();
      formData.append("file", file.file);
      this.uploading = true;
      openUpload(this.relationUnid, formData, (progress) =>
      {
        this.$emit("AttachmentViewProgressUpdate", progress);
      })
        .then((res) =>
        {
          if (res.errorCode == 0)
          {
            this.$message.info('盖章文件上传成功')
            //更新当前显示列表
            this.getFileDataList();
          } else if (res.message == 'filename : [chrome.exe], extension : [exe], allowed extension : [[bmp, gif, jpg, jpeg, png, doc, docx, xls, xlsx, ppt, pptx, html, htm, txt, rar, zip, gz, bz2, pdf]]')
          {
            this.$message.error('文件格式不受支持，请更换')
          } else
          {
            this.$message.error(res.message)
          }
        })
        .finally(() =>
        {
          this.uploading = false;
        });
    },
    //文件删除
    handleRemove(file)
    {
      if (this.currentPerson)
      {
        this.$message.error("拟稿人才能删除附件！");
        return;
      }
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() =>
        {
          downWordFile({ unids: file.unid })
            .then((res) =>
            {
              this.$message.success("附件删除成功");
              // 查询文件列表
              this.getFileDataList();
            })
            .catch((err) =>
            {
              console.log(err);
            });
        })
    },
    //在线预览文件
    handlePrevieFile(file)
    {
      filePreview(file,false,this.formType);
    },
  },
};
</script>
<style lang="scss" scoped>
.attachment-box {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  // padding: 0 10px;
  ::v-deep .el-upload-dragger {
    width: 200px;
    height: 80px;
  }
  .el-icon-plus {
    font-size: 20px;
    margin: 10px auto;
    border: 2px solid #333;
    padding: 4px;
    border-radius: 4px;
  }

  .file-box {
    width: 100%;
  }
  .upload-demo {
    // width: 200px;
    display: flex;
    justify-content: flex-start;
  }
}
.filename {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.file-list {
  display: flex;
  flex-direction: column;
  width: 500px;
  .file-item {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    display: flex;
    font-size: 14px;
    margin-top: 5px;
    .el-icon-link {
      font-size: 18px;
      margin-right: 5px;
      transform: translateY(2px);
    }
    .btn-down {
      color: #409eff;
      cursor: pointer;
    }
    .btn-remove {
      color: #f56c6c;
      cursor: pointer;
      margin-left: 10px;
    }
  }
}

.scorll-Y ::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
